<template>
	<view class="content-box">
		<view class="top-box">
			<u-tabs :list="tabsList" :current="current" :activeStyle="activeStyle" :itemStyle="itemStyle"
             @click="tabSetCurrent" :scrollable="false" lineColor="#FFCE4E" lineWidth="38rpx" lineHeight="8rpx"></u-tabs>
			<view class="calendar-box " style="margin-top: 20rpx;">
				<view class="value" @click="dateShow=true">
					<view class="">
						{{startTime?startTime+' ~ '+endTime:'选择日期'}}
					</view>
					
					
					<view class="btn" v-if="startTime"  @click.stop="dateTextClock">
						<u-icon name="close-circle-fill" size="30rpx"></u-icon>
					</view>
				</view>
				<u-icon name="calendar" size="50rpx"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 220rpx);">
			<view class="" v-for="item in list">
				<view style="padding-top: 20rpx;" v-for="monthItem in item.monthData">
						<view class="card">
							<view class="title">
								<view class="">
									{{monthItem.monthStr}}
								</view> 
								<view class="">
									￥{{monthItem.monthTotal}}
								</view>
							</view>
							<view class="bill-item" :style="index?'':'border-top:none'" v-for="dayItem in monthItem.dayData">
								<view class="name">
									<view class="">
										{{dayItem.remark}}
									</view>
									<view class="">
										{{dayItem.createTime}}
									</view>
								</view>
								<view class="type">
									佣金
								</view>
								<view class="money">
									{{current?'-':'+'}}￥{{dayItem.price}}
								</view>
							</view>
						</view>
						
					</view>
				
			</view>
			
			<u-empty
			v-if="list.length==0"
			marginTop="200rpx"
			        text="暂无流水数据"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
		</scroll-view>
		
			<Loading/>
		<u-calendar :show="dateShow" :mode="range"  minDate="1703659541000" showLunar :maxDate="new Date().getTime()" closeOnClickOverlay @close="dateShow=false" @confirm="confirm"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow: false,
				startTime:'',
				endTime:'',
				tabsList: [{
					name: '佣金收入'
				}, {
					name: '提现流水'
				}],
				current: 0,
				itemStyle: {
					fontSize: '28rpx',
					color:'#333333',
					fontWeight:'bold',
					height: '80rpx'
				},
				activeStyle: {
					color:'#FFCE4E'
				},
				list:[]
			}
		},
		mounted() {
			this.upData()
		},
		methods: {
			upData(){
				let data={
					endTime:this.endTime?this.endTime+' 23:59:59':'',
					startTime:this.startTime?this.startTime+' 00:00:00':'',
					type:this.current+1
				}
				this.$myRequest('/api/driver/mine/v1/commission/list',data).then(res=>{
					this.list=res.data
				})
              
			},
			tabSetCurrent(e) {
				this.list=[]
				this.current=e.index
				this.upData()
			},
			dateTextClock(){
				this.startTime=''
				this.endTime=''
				this.upData()
			},
			confirm(e){
				this.startTime=e[0]
				this.endTime=e[e.length-1]
				this.dateShow=false
				this.upData()
			}
		}
	}
</script>

<style lang="scss">
.content-box{
	background-color: #F5F5F5;
	min-height: 100vh;
	.top-box{
		background-color: #ffffff;
		padding-bottom: 20px;
		.calendar-box {
			display: flex;
			padding: 0 30rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 38rpx;
			border: 2rpx solid #D2D2D2;
		    margin:0 40rpx; 

			.value {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #666666;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn{
					margin-left: 10rpx;
				}
			}
		}
		
	}
	
	.card{
		background-color: #ffffff;
		padding-top: 28rpx;
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 40rpx;
			view:nth-child(2){
				font-size: 32rpx;
				color: #FFCE4E;
			}
		
			&:before {
				content: '';
				width: 14rpx;
				height: 36rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFCE4E;
			}
		}
		.bill-item{
			padding: 36rpx 0;
			margin: 0 40rpx;
			display: flex;
			align-items: center;
			border-top: 2rpx solid #E3E3E3;
			font-weight: bold;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.name{
				font-size: 24rpx;
				margin-left: 16rpx;

				view:nth-child(2){
					color: #999999;
					margin-top: 16rpx;
					font-weight: 100;
				}
			}
			.type{
				text-align: center;
				flex: 1;
			}
			.money{
				color: #FFCE4E;
			}
		}
	}
}
</style>
